<template>
	<div class="slide">
		<section class="main_banner-father pr40rem pl40rem">
			<h3 class="white align-center pt45rem pb45rem fs40rem">品牌推荐</h3>
			<div class="main_banner">
				<!-- <swiper :data="banner" img-key="brand_ads" img-link="goods_id" status-link="status=2" :options="options"></swiper> -->
				<swiper v-if="data.length > 0" :options="options">
				    <swiper-slide v-for="(item, index) in data" :key="index" class="pb10rem">
			    		<img :src="img_url + item.brand_ads" v-lazy="img_url + item.brand_ads" class="responsive-img"  @click="jump(item)">
				    </swiper-slide>
				    <div class="swiper-pagination" slot="pagination"></div>
				</swiper>
			</div>
		</section>
	</div>
</template>

<script>
import { getHome } from "@/api/home";
import { iosapp } from "@/utils";
import 'swiper/dist/css/swiper.css';
import { swiper, swiperSlide } from 'vue-awesome-swiper';
import { Lazyload } from 'mint-ui';
import Vue from "vue";
Vue.use(Lazyload);
	export default{
		components: {
			swiper,
    		swiperSlide,
		},
		data()
		{
			return{
				img_url : process.env.IMG_URL,
				data    : [],
				showApp : this.$route.query.isAndroid,
				options : {
					loop : true,
				    autoplay:{
				    	delay: 3500,
				    	disableOnInteraction: false,
				    },
					autoplayDisableOnInteraction: false,
					effect: 'coverflow',
					centeredSlides: true,
				    slidesPerView: 2,
					pagination: {
				    	el: '.swiper-pagination',
				    	bulletClass : 'my-red',
					},
					coverflowEffect: {
						rotate: 0,// 旋转的角度
						stretch: 10,// 拉伸   图片间左右的间距和密集度
						depth: 160,// 深度   切换图片间上下的间距和密集度
						modifier: 2,// 修正值 该值越大前面的效果越明显
						slideShadows : false,// 页面阴影效果
					}
				},
			}
		},
		created()
		{
			this.loadHomeData();
		},
		methods:
		{
			loadHomeData()
			{
				getHome('1').then(res => {
					this.data = res.data.brand;
				})
			},
			jump(item)
			{
				let params = {
					goods_id : item.goods_id
				}
				if(this.showApp)
					Android.showToast(item.goods_id);
				else
					iosapp('jumpDetail',params)
			}
		}
	}
</script>

<style lang="less">
	.slide{
		.main_banner-father{
			background: url('../../assets/bannerB_bg.png') no-repeat center center / 100%;
			height: 750/28rem;
		}
		.main_banner{
			// height: 510/28rem;
			.swiper-container{
				.swiper-slide{
					width: 370/28rem;
					img{
						display: block;
						width: 100%;
						height: 510/28rem;
						object-fit: cover;
					}
				}
				.swiper-pagination-bullets{
				    bottom: 0px !important;
			        position: relative !important;
				}
				.swiper-pagination{
					margin-top: 40/28rem;
				}
			}
		}
	}
</style>